<template>
  <div >
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition appear>
      <h3 v-show="isShow" class="demo">{{msg}}</h3>
    </transition>
    <!-- 同时应用多个元素动画 -->
    <transition-group appear>
      <h3 v-show="!isShow" class="demo" key="1">你好</h3>
      <h3 v-show="isShow" class="demo" key="2">世界</h3>
    </transition-group>
  </div>
</template>

<script>
export default {
  name:'Hello',
  data() {
    return {
      msg:'hello ',
      isShow:true
    }
  },
}
</script>

<style>
  .demo {
    background-color: cadetblue;
    height: 90px;
  }
  .v-enter-active {
    animation: atguigu 1s;
  }
  .v-leave-active {
    animation: atguigu 1s reverse;
  }
  @keyframes atguigu {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0px);
    }
  }
</style>